<template>
  <input
    type="text"
    v-model="model"
    readonly
    placeholder="请选择日期"
    class="date-input"
    @click="show = true"
  />
  <!-- 日期选择器组件 -->
  <up-calendar :show="show" :mode="mode" @confirm="onConfirm" @close="onClose">
    <!-- 如果 up-calendar 支持插槽，可以在这里添加关闭按钮 -->
    <template #header>
      <button class="close-button" @click="onClose">×</button>
    </template>
  </up-calendar>
</template>

<script setup>
import { ref } from "vue";
import { defineModel } from "vue";

const model = defineModel();
const show = ref(false);
const mode = ref("single");

// 当用户确认选择日期时触发的函数
const onConfirm = (e) => {
  model.value = e[0];
  onClose();
};

// 关闭日期选择器的函数
const onClose = () => {
  show.value = false;
};
</script>

<style scoped>

</style>
